<template>
  <div>
    <div>
      <img style="width:100%"
           src="../assets/img/head2.png"
           alt="">
    </div>
    <div id="Software"
         class="container">
      <div class="row">
        <div id="left"
             class="col-md-9 col-xs-9">
          <!-- <ul class="left-container wow bounceInLeft">
                        <p>软件产品</p>
                        <li v-for="(item,index) in softwareList" :key="index">
                            <router-link :to=item.path>{{item.name}}</router-link>
                        </li>
                    </ul> -->
          <div class="table-title">
            <span class="title-text">小拼箱</span>
            <!-- <span class="title-more"><a href="#" @click="goServiceDetail">更多+</a></span> -->
          </div>
          <div class="table-list"
               v-for="(item,index) in LPLlist"
               :key="index">
            <div class="line-item">
              <a href="#"
                 class="line-item-a"
                 @click="goProductDetail(item)">
                <div class="item-content">
                  <div class="item-titleinfo">
                    <div class="item-logo">
                      <img class="item-logo-img"
                           src=""
                           alt="">
                    </div>
                    <div class="item-name">{{item.product_name}}</div>
                    <div class="item-linetime">航程：{{getlinetime(item.eta_time,item.etd_time)}}天</div>
                    <div class="item-linetime2">{{getproduct_type(item.product_type)}}</div>
                  </div>
                  <div class="item-maininfo">
                    <div class="item-company">{{item.company_name}}</div>
                    <div class="item-date">
                      <span>发布时间：{{item.publish_time.substr(0,10)}}</span>
                      <span class="able-date">有效时间：{{item.start_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</span>
                    </div>
                  </div>
                  <div class="item-start-end">
                    <div class="item-start">
                      <div class="start-name">
                        <span class="start-point">起</span>{{item.start_point_name}}
                      </div>
                      <div class="start-date">ETD：{{item.etd_time.substr(0,10)}}</div>
                    </div>
                    <div class="arrow-logo">
                      <img src=""
                           alt="">
                    </div>
                    <div class="item-end">
                      <div class="end-name">
                        <span class="end-point">终</span>{{item.end_point_name}}
                      </div>
                      <div class="end-date">ETA：{{item.eta_time.substr(0,10)}}</div>
                    </div>
                  </div>
                </div>
              </a>
            </div>

          </div>
        </div>
        <div id="right"
             class="col-md-3 col-xs-3  wow bounceInRight">
          <!-- <router-view></router-view> -->
          <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
            <img class="table-img"
                 src="@/assets/img/table2.png"
                 alt="大数据管理系统">
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import { WOW } from "wowjs";
export default {
  name: 'LPL',
  data () {
    return {
      // softwareList: [
      //     {
      //         path: '/software/smartTown',
      //         name: '智能小镇管理系统'
      //     },{
      //         path: '/software/bigData',
      //         name: '大数据管理系统'
      //     }
      // ]
      LPLlist: []
    }
  },
  created () {
    this.getproducts()
  },
  mounted () {
    var wow = new WOW();
    wow.init();
  },
  methods: {
    getproducts () {
      const api = `products`
      this.$axios.get(api)
        .then(res => {
          // console.log(res.data)
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].service_type === '1') {
              this.LPLlist.push(res.data.data[i])
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    goProductDetail (item) {
      this.$router.push(
        {
          name: 'ProductDetail',
          params: { row: item }
        })
    },
    getlinetime (date1, date2) {
      var date1 = new Date(date1)
      var date2 = new Date(date2)
      var s1 = date1.getTime()
      var s2 = date2.getTime()
      var total = (s1 - s2) / 1000
      var day = parseInt(total / (24 * 60 * 60))
      return day
    },
    getproduct_type (data) {
      switch (data) {
        case 'sea':
          return "海运"
        case 'line':
          return "陆运"
        case 'air':
          return "空运"
        case 'railway':
          return "铁路"
        default:
          console.log('其他类型')
          return
      }
    },
  }
}
</script>
<style scoped>
/* 表格 */
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.title-more {
  color: #07467c;
  font-size: 13px;
  line-height: 32px;
  text-align: right;
  cursor: pointer;
}
.table-list {
  min-height: 120px;
}
.line-item {
  height: 132px;
  background-color: #f4f4f4;
}
.line-item-a {
  display: block;
}
a {
  text-decoration: none;
  color: #666;
}
.item-content {
  height: 102px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-titleinfo {
  width: 110px;
  text-align: center;
}
.item-logo {
}
.item-name {
  font-size: 14px;
  color: #888;
  padding: 0 10px;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: break-all;
  margin: 0 auto;
}
.item-trans {
  font-size: 14px;
  color: #888;
}
.item-linetime {
  font-size: 12px;
  color: #4198c7;
}
.item-linetime2 {
  padding-top: 10px;
  font-size: 15px;
  color: #0f9eeb;
}

.item-maininfo {
}
.item-company {
  font-size: 18px;
  color: #666;
}
.item-date {
  color: #07467c;
  font-size: 14px;
}
.able-date {
  margin-left: 20px;
}

.item-start-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-start {
}
.start-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.start-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #07467c;
  color: #fff;
  border-radius: 50%;
}
.start-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}
.arrow-logo {
  margin-right: 25px;
  margin-left: 25px;
  margin-top: 5px;
}
.item-end {
}
.end-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.end-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #bd6664;
  color: #fff;
  border-radius: 50%;
}
.end-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}

.table-img {
  width: 280px;
  height: 559px;
  height: auto !important;
}

#left {
  margin: 50px 0;
}
.left-container {
  width: 60%;
  margin: 0 auto;
  border: 1px solid #474747;
  border-radius: 5px;
}
.left-container > p {
  text-align: center;
  line-height: 45px;
  padding: 0;
  margin: 0;
  background: #474747;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.left-container > li {
  text-align: center;
  height: 38px;
  line-height: 38px;
  margin: 0;
  border-top: 1px solid #474747;
}
.left-container > li > a {
  text-decoration: none;
}
.left-container > li:hover {
  background: #928989;
}
#right {
  padding: 50px 0;
}
@media screen and (max-width: 768px) {
  #right {
    padding: 15px;
  }
}
</style>

